"use client";
import { useSetState } from "ahooks";
import { Suspense, lazy, useRef } from "react";
import classNames from "classnames";

import Tabs from "../../components/Tabs";
import TabItem from "../../components/Tabs/TabItem";
import ScrollWrapper from "../../components/ScrollWrapper";

import Loading from "../../components/Loading";
import { useStore } from "../../../store/createStore";
import styles from "./index.module.scss";

import Content from "./_edit/index";
import Siderbar from "./_siderbar";
import Previer from "./_previer";

const ContentItemEdit = lazy(async () => {
  return import("./_edit/contentItem/edit");
});

const Customization = lazy(async () => {
  return import("./_customization");
});
const PersonalDetailEdit = lazy(async () => {
  return import("./_edit/personalDetail/personalDetailEdit");
});
export const totalContent = [
  "education",
  "work",
  "project",
  "school",
  "internship",
  "certificate",
  "skills",
  "selfevaluation",
  "hobby",
  "custom",
] as Sections[];

function Index() {
  const leftPart = useRef(null);
  const { isMobile, downloading, currentTab, setCurrentTab } = useStore();
  const [state, setState] = useSetState({
    current: "content",
    showPreview: false,
  });

  const mainStyle: any = {};
  if (currentTab !== "content" && currentTab !== "customize") {
    if (!isMobile) {
      mainStyle.marginLeft = "10px";
    } else {
      mainStyle.margin = "0";
    }
  }
  return (
    <>
      <div className={styles.content}>
        <div className={styles.leftPart} ref={leftPart}>
          {currentTab === "content" || currentTab === "customize" ? (
            <Siderbar
              active={currentTab}
              onChange={(e) => {
                if (e === "preview") {
                  setState({
                    showPreview: true,
                  });
                  return;
                }
                setCurrentTab(e);
              }}
            ></Siderbar>
          ) : null}
          <div className={styles.main} style={mainStyle}>
            <Tabs active={currentTab}>
              <TabItem key={"content"}>
                <Content></Content>
              </TabItem>
              <TabItem key={"customize"}>
                <ScrollWrapper>
                  <Suspense
                    fallback={
                      <div
                        style={{
                          width: "100%",
                          height: "100%",
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                        }}
                      >
                        <Loading
                          style={{
                            width: "40px",
                            height: "40px",
                            color: "#a4a4a4",
                          }}
                        ></Loading>
                      </div>
                    }
                  >
                    <Customization></Customization>
                  </Suspense>
                </ScrollWrapper>
              </TabItem>
              <TabItem key={"personalDetailEdit"} removeOnLeave={true}>
                <ScrollWrapper>
                  <Suspense
                    fallback={
                      <div
                        style={{
                          width: "100%",
                          height: "100%",
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                        }}
                      >
                        <Loading
                          style={{
                            width: "40px",
                            height: "40px",
                            color: "#a4a4a4",
                          }}
                        ></Loading>
                      </div>
                    }
                  >
                    <PersonalDetailEdit />
                  </Suspense>
                </ScrollWrapper>
              </TabItem>
              {totalContent.map((item: Sections) => {
                return (
                  <TabItem key={`${item}Edit`} removeOnLeave={true}>
                    <ScrollWrapper>
                      <Suspense
                        fallback={
                          <div
                            style={{
                              width: "100%",
                              height: "100%",
                              display: "flex",
                              justifyContent: "center",
                              alignItems: "center",
                            }}
                          >
                            <Loading
                              style={{
                                width: "40px",
                                height: "40px",
                                color: "#a4a4a4",
                              }}
                            ></Loading>
                          </div>
                        }
                      >
                        <ContentItemEdit key={item} type={item} />
                      </Suspense>
                    </ScrollWrapper>
                  </TabItem>
                );
              })}
            </Tabs>
          </div>
        </div>
        {
          <div
            className={classNames(styles.previewWraper, {
              [styles.showPreview]: state.showPreview,
            })}
            onClick={() => {
              setState({
                showPreview: false,
              });
            }}
          >
            <Previer leftPart={leftPart}></Previer>
          </div>
        }
      </div>
    </>
  );
}

export default Index;
